<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta charset="UTF-8">
    <title th:text="${question.title}">个人中心</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" href="../static/css/bootstrap-theme.css" th:href="@{/css/bootstrap-theme.css}">
    <link rel="stylesheet" href="../static/css/editormd.preview.css" th:href="@{/css/editormd.preview.css}">
    <link rel="stylesheet" href="../static/css/community.css" th:href="@{/css/community.css}">
    <script type="text/javascript" src="../static/js/jquery2-1-4.min.js" th:src="@{/js/jquery2-1-4.min.js}"></script>
    <script type="text/javascript" src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>


    <script type="text/javascript" src="../static/js/editormd.min.js" th:src="@{/js/editormd.min.js}"></script>
    <script type="text/javascript" src="../static/js/lib/marked.min.js" th:src="@{/js/lib/marked.min.js}"></script>
    <script type="text/javascript" src="../static/js/lib/prettify.min.js" th:src="@{/js/lib/prettify.min.js}"></script>
    <script th:src="@{/js/vue.min.js}"></script>
    <script type="text/javascript">
        $(function () {
            editormd.markdownToHTML("question-view",{});
        });
    </script>
</head>

<body>
<div id="app-5">
    <div th:insert="~{navigation :: nav}"></div>
    <div class="container-fluid main profile">
        <div class="row">
            <!--左边-->
            <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
                <!--正文-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <h4 class="question-title"><span th:text="${question.title}"></span></h4>
                    <span class="text_desc">
                    作者:<span th:text="${question.user.name}">0</span> |
                    发布时间:<span th:text="${#dates.format(question.gmtCreate,'yyyy-MM-dd HH:mm')}"></span> |
                    阅读数:<span th:text="${question.viewCount}">0</span>
                </span>
                    <hr class="col-lg-12	col-md-12 col-sm-12 col-xs-12">
                    <!--内容-->
                    <div id="question-view" class="col-lg-12	col-md-12 col-sm-12 col-xs-12">
                        <textarea style="display:none;" th:text="${question.description}"></textarea>
                    </div>
                    <hr class="col-lg-12	col-md-12 col-sm-12 col-xs-12">
                    <!--标签-->
                    <div class="col-lg-12	col-md-12 col-sm-12 col-xs-12">
                        <span th:each="tag:${question.tag.split(',')}">
                            <span class="label label-info glyphicon glyphicon-tag" th:text="${tag}"></span>
                        </span>
                    </div>
                    <!--编辑-->
                    <hr class="col-lg-12	col-md-12 col-sm-12 col-xs-12">
                    <div class="col-lg-1	col-md-12 col-sm-12 col-xs-12">
                        <a th:href="@{'/publish/'+${question.id}}" class="community-menu"
                           th:if="${session.user!=null && session.user.id == question.creator}">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true">编辑</span>

                        </a>
                    </div>
                </div>
                <!--回复列表-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <h4>
                        <span th:text="${question.commentCount}"></span><span>个回复</span>
                    </h4>
                    <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comment-sp ">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comments" th:each="comment : ${comments}">
                        <div class="media">
                            <div class="media-left">
                                <a href="#">
                                    <img class="media-object img-circle" th:src="${comment.user.avatarUrl}">
                                </a>
                            </div>
                            <div class="media-body">
                                <h5 class="media-heading">
                                    <span th:text="${comment.user.name}"></span>
                                </h5>
                                <div th:text="${comment.content}"></div>
                                <div class="menu">
                                    <span class="glyphicon glyphicon-thumbs-up icon"></span>
                                    <span @click="collapseComments($event)">
                                            <span class="glyphicon glyphicon-comment icon" th:data="${comment.id}"
                                                   style="display: inherit;"> <span th:data="${comment.id}"
                                                    th:text="${comment.subComment}" style="position: relative;top: -2px;left: -7px;
"></span></span>

                                        </span>
                                    <span class="pull-right"
                                          th:text="${#dates.format(comment.gmtCreate,'yyyy-MM-dd')}"></span>
                                </div>
                                <!--二级评论-->
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 collapse  sub-comments"
                                     th:id="${'firstLevelComment-'+comment.id}">
                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comments"
                                         v-for="subComment in subComments">
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="#">
                                                    <img class="media-object img-circle"
                                                         :src="subComment.user.avatarUrl">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h5 class="media-heading">
                                                    <span>{{subComment.user.name}}</span>
                                                </h5>
                                                <div>{{subComment.content}}</div>
                                                <div class="menu">
                                                <span class="pull-right">{{subComment.gmtCreate}}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                        <input type="text" class="form-control" placeholder="评论一下"
                                               th:id="${'twoLevelComment-'+comment.id}">
                                        <button type="button" class="btn btn-success pull-right" style="margin:10px 0"
                                                th:data="${comment.id}" @click="twoLevelComment($event)">评论
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <!--回复框-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <h4>提交回复</h4>
                    <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comment-sp">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="comment_section">
                        <div class="media">
                            <div class="media-left">
                                <a href="#">
                                    <img class="media-object img-circle" th:src="${question.user.avatarUrl}">
                                </a>
                            </div>
                            <div class="media-body">
                                <h5 class="media-heading">
                                    <span th:text="${question.user.name}"></span>
                                </h5>
                            </div>
                        </div>
                        <textarea class="form-control comment-content" rows="6" th:name="${question.id}"></textarea>
                        <button type="button" class="btn btn-success comment-btn" @click="firstLevelComment">评论
                        </button>
                    </div>
                </div>
            </div>
            <!--右边-->
            <div class="col-lg-3	col-md-12 col-sm-12 col-xs-12">
                <div class="col-lg-12	col-md-12 col-sm-12 col-xs-12">
                    <h4>发起人</h4>
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object img-circle" th:src="${question.user.avatarUrl}">
                            </a>
                        </div>
                        <div class="media-body">
                            <h5 class="media-heading">
                                <span th:text="${question.user.name}"></span>
                            </h5>
                        </div>
                    </div>
                </div>
                <hr class="col-lg-12	col-md-12 col-sm-12 col-xs-12">
                <div class="col-lg-12	col-md-12 col-sm-12 col-xs-12">
                    <h4>站长微信</h4>
                    <img th:src="@{/images/me.jpg}" style="height: 200px">
                </div>
                <hr class="col-lg-12	col-md-12 col-sm-12 col-xs-12">
                <div class="col-lg-12	col-md-12 col-sm-12 col-xs-12">
                    <h4>相关问题</h4>
                    <ul style="list-style: none;padding-left: 0;font-size: 13px;line-height: 20px">
                        <li th:each="relatedQuestion:${relatedQuestions}"  style="cursor: pointer;color:#155faa;text-decoration: none">
                            <a th:href="@{'/question/'+${relatedQuestion.id}}" th:text="${relatedQuestion.title}"></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../static/js/bootstrap.min.js" th:src="@{/js/community.js}"></script>
</div>
</body>
</html>